<template>
  <a-layout-sider class="sidebar-container">
    <div class="text-center header p-6 box-border">
      <!-- <img src="@/assets/img-png/logo_icon@2x.png" alt="班班" class="w-full" /> -->
       内部管理系统
    </div>
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      v-bind="bind"
      @click="menuClick"
    >
      <sider-item
        v-for="rs in menuData"
        :key="rs.path"
        :item="rs"
        :base-path="rs.path"
        class="text-[15px]"
      />
    </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
import SiderItem from "./sidebarItem.vue";
import { constantRoutes } from "./index";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const selectedKeys = ref<string[]>([route.path]);
const openKeys = ref<string[]>([route.matched[0].path]);
  console.log('处理后的路由', constantRoutes)
const bind = computed(() => {
  return {
    theme: "dark",
    mode: "inline",
  };
});
const menuData = computed(() => {
  return constantRoutes;
});

const menuClick = ({ item, key }: { item: any; key: string }) => {
  router.push(item.path);
  selectedKeys.value = [key];
  if (openKeys.value.indexOf(key) > -1) {
    openKeys.value.splice(openKeys.value.indexOf(key), 1);
  }
};
onMounted(() => {
  if (route.meta.active) selectedKeys.value = [route.meta.active as string];
});

watch(
  () => route.path,
  () => {
    if (route.meta.active) selectedKeys.value = [route.meta.active as string];
    else selectedKeys.value = [route.path as string];
  }
);
</script>

<style lang="less" scoped>
.header{
  color:#fff !important;
  font-size:20px;
}
</style>
